<!--
 * @Author: 卡卡 1071780426@qq.com
 * @Date: 2023-08-30 18:01:59
 * @LastEditors: 贺楠 1071780426@qq.com
 * @LastEditTime: 2024-10-31 17:12:28
 * @FilePath: \zjgxpt\zdgy\src\components\commonPublic\fromLayout.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="department" id="department tableInfoBox" >
    <div class="department_right">
      <div class="defaultboxYJ">
        <div class="app-container-btn">
          <el-button type="primary" @click="yj_saveForm" v-if="isSave">
            保存
          </el-button>
          <el-button @click="backPage" v-if="goback">返回</el-button>
        </div>

        <div class="tab" v-if="changeBtn">
          <div
            v-for="(data, index) in typeData"
            :key="data.value"
            @click="changeType($event, index)"
          >
            <div
              class="btn"
              :style="{
                color: data.show === true ? 'rgba(0, 117, 255, 1)' : '#343639',
                background: data.show === true ? '#E0EFFF' : '#fff',
              }"
            >
              {{ data.text }}
            </div>
          </div>
        </div>

        <div
          class="text_table TensionRealTime"
          :style="{
            height:
              changeBtn === false ? 'calc(100% - 50px)' : 'calc(100% - 100px)',
          }"
        >
          <div class="dialogBody common table_detail" >
            <div
              style="
                
                margin-bottom: 20px;
                height: 97%;
                box-sizing: border-box;
              "
            >
              <slot name="formcon"> </slot>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// import vDatePicker from "@/components/public/v-DatePicker";
export default {
  props: {
    isSave: {
      type: Boolean,
      default: false,
    },
    goback: {
      type: Boolean,
      default: true,
    },
    changeBtn: {
      // 切换页签是否展示
      type: Boolean,
      default: false,
    },
    typeData: {
      // 页签切换
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  data() {
    return {};
  },

  methods: {
    backPage() {
      // this.$emit('goBack')
      // window.sessionStorage.removeItem("GxEmbedded_form1");
      // window.sessionStorage.removeItem("GxEmbedded_form2");
      window.sessionStorage.removeItem("GxEmbedded_primaryInfo");
      // window.sessionStorage.removeItem("GxEmbedded_secondaryInfo");
      this.$router.back();
    },
    yj_saveForm() {
      this.$emit("yj_saveForm");
    },
    changeType(e, index) {
      for (let i in this.typeData) {
        if (parseFloat(i) === index) {
          this.typeData[i].show = true;
        } else {
          this.typeData[i].show = false;
        }
      }
      this.$emit("changeType", e, index);
    },
  },
};
</script>
<style lang="less" scoped>
// 页面切换
.tab {
  display: flex;
  font-size: 14px;
  height: 40px;
  line-height: 40px;
  box-sizing: border-box;
  border-bottom: 2px solid #e4e7ed;
  padding: 0 0.16rem;
  margin-bottom: 10px;

  .btn {
    margin-top: 4px;
    margin-right: 16px;
    width: 100px;
    height: 33px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
  }
}
// 页面切换
.TensionRealTime {
  // flex: 1;
  // height: calc(100% - 100px);
  display: flex;
  flex-direction: column;
}

.defaultboxYJ {
  height: 100%;
}

.table_detail {
  height: 100%;
  overflow: hidden;
}
</style>
